import React, { useState, useEffect } from "react";
import Crumbs from "../../components/crumbs/index";
import "./sass/overview.scss";
import { Card } from "antd";
import * as echarts from "echarts";
// 组件
const OverView = (props) => {
  // 面包屑
  const [CrumbsList] = useState([
    {
      name: "订单管理",
    },
    {
      name: "订单概述",
      url: "/overview",
    },
  ]);
  // echarts 图标
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("forms"));
    // 绘制图表
    myChart.setOption({
      title: {
        left: "center",
        text: "销售额",
        textStyle: {
          //标题颜色
          color: "#B2B1AF",
          fontWeight: "normal",
        },
      },
      xAxis: {
        type: "category",
        data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      },
      yAxis: {
        type: "value",
      },

      series: [
        {
          data: [1000, 1200, 1400, 900, 1350, 1100],
          type: "line",
        },
      ],
    });
  }, []);
  return (
    <div className="OverView">
      <Crumbs CrumbsList={CrumbsList} />
      <div className="card_box">
        <Card
          type="inner"
          title={<b style={{ fontSize: 14 }}>今日成交</b>}
          extra={<b style={{ fontSize: 14 }}>人均消费：30.00￥</b>}
          style={{ width: 490 }}
        >
          <div className="card">
            <div>
              <p>成交量/交易量</p>
              <p>3</p>
            </div>
            <div>
              <p>成交额/交易额</p>
              <p style={{ color: "red" }}>￥90.00</p>
            </div>
          </div>
        </Card>
        <Card
          type="inner"
          title={<b style={{ fontSize: 14 }}>今日成交</b>}
          extra={<b style={{ fontSize: 14 }}>人均消费：30.00￥</b>}
          style={{ width: 490 }}
        >
          <div className="card">
            <div>
              <p>成交量/交易量</p>
              <p>3</p>
            </div>
            <div>
              <p>成交额/交易额</p>
              <p style={{ color: "red" }}>￥90.00</p>
            </div>
          </div>
        </Card>
        <Card
          type="inner"
          title={<b style={{ fontSize: 14 }}>今日成交</b>}
          extra={<b style={{ fontSize: 14 }}>人均消费：30.00￥</b>}
          style={{ width: 490 }}
        >
          <div className="card">
            <div>
              <p>成交量/交易量</p>
              <p>3</p>
            </div>
            <div>
              <p>成交额/交易额</p>
              <p style={{ color: "red" }}>￥90.00</p>
            </div>
          </div>
        </Card>
        <Card
          type="inner"
          title={<b style={{ fontSize: 14 }}>今日成交</b>}
          extra={<b style={{ fontSize: 14 }}>人均消费：30.00￥</b>}
          style={{ width: 490 }}
        >
          <div className="card">
            <div>
              <p>成交量/交易量</p>
              <p>3</p>
            </div>
            <div>
              <p>成交额/交易额</p>
              <p style={{ color: "red" }}>￥90.00</p>
            </div>
          </div>
        </Card>
      </div>
      <div>
        <div id="forms" style={{ width: "1000px", height: "392px" }}></div>
      </div>
    </div>
  );
};

export default OverView;
